<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
<title>WE COPYRIGHT CHAIN FOUNDATION LTD.- mobile phone number verification</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="" />
<link rel="icon" type="image/x-icon" th:href="@{~/images/favicon.ico}">
<link href="../static/css/bootstrap.css" th:href="@{~/css/bootstrap.css}" rel='stylesheet' type='text/css' />
<link href="../static/css/font-awesome.css" rel="stylesheet" th:href="@{~/css/font-awesome.css}"> 
<link rel="stylesheet" href="../static/css/slider.css" th:href="@{~/css/slider.css}">
<link href="../static/css/style.css" rel='stylesheet' type='text/css' th:href="@{~/css/style.css}"/>	
<link rel="stylesheet" type="text/css" href="../static/css/mislider.css" th:href="@{~/css/mislider.css}"/>
<link rel="stylesheet" type="text/css" href="../static/css/mislider-skin-cameo.css" th:href="@{~/css/mislider-skin-cameo.css}"/>
<link rel="stylesheet" type="text/css" href="../static/css/login.css" th:href="@{~/css/login.css}"/>
<link th:href="@{/css/nav.css}" rel='stylesheet' type='text/css' />
<style type="text/css">
	 body{background: #f0f0f0;}
	.top_header_agile_info_w3ls{background: #fff;}
</style>
</head>
	<body>
	<div id="" style="position: relative;">
	

	<div class="top_banner" id="topl">
		<!-- SVG Arrows -->
		<div class="svg-wrap">
			<svg width="64" height="64" viewBox="0 0 64 64">
				<path id="arrow-left" d="M46.077 55.738c0.858 0.867 0.858 2.266 0 3.133s-2.243 0.867-3.101 0l-25.056-25.302c-0.858-0.867-0.858-2.269 0-3.133l25.056-25.306c0.858-0.867 2.243-0.867 3.101 0s0.858 2.266 0 3.133l-22.848 23.738 22.848 23.738z" />
			</svg>
			<svg width="64" height="64" viewBox="0 0 64 64">
				<path id="arrow-right" d="M17.919 55.738c-0.858 0.867-0.858 2.266 0 3.133s2.243 0.867 3.101 0l25.056-25.302c0.858-0.867 0.858-2.269 0-3.133l-25.056-25.306c-0.858-0.867-2.243-0.867-3.101 0s-0.858 2.266 0 3.133l22.848 23.738-22.848 23.738z" />
			</svg>
		</div>
		<div class="top_header_agile_info_w3ls">
		  <nav class="navbar navbar-default">
				<div class="navbar-header navbar-left">
					<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
						<span class="sr-only">copyright</span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
					</button>
					<h1><a class="navbar-brand" href="index.html"  th:href="@{/}"><img  style="margin-top: 4px" src="../static/images/logoll.png" th:src="@{~/images/logoll.png}"/></a><span class="ospan">mobile phone number verification</span></h1>
				</div>
				<!-- Collect the nav links, forms, and other content for toggling -->
					<div class="collapse navbar-collapse navbar-right" id="bs-example-navbar-collapse-1">
					<div id="m_nav_container" class="m_nav wthree_bg">
						<nav class="menu menu--sebastian">
							<div class="dropdown-back-white">
							  <span class="dropbtn-back-white" th:text="${session.user.userName}==null?${#strings.length(session.user.userNickname)>5?#strings.substring(session.user.userNickname,0,5)+'...':session.user.userNickname}:${#strings.length(session.user.userName)>5?#strings.substring(session.user.userName,0,5)+'...':session.user.userName}">login/registration</span><i class="menu-ico-back-white"></i>
							  <div class="dropdown-content-back-white">
							    <a th:href="@{~/user/userInfo.html}">user center</a>
							    <a th:href="@{~/auth/longOut}">exit</a>
							  </div>
							</div>
						</nav>
					</div>

					</nav>
				</div>
		</div>
	
	
		<!--<div class="sleekslider" id="home">
	
			<div class="slide active bg-1">
				
			</div>	
		</div>	-->
		
		
      <!--welcome-->
 </div>
	</div>

<style type="text/css">
	.formd{padding-top: 120px; min-height: 892px;}
	.formdr{background: #fff; width:100%; height: 100%;}
	.formdl{padding: 80px 0 40px 0; min-height: 600px; }
	.formdl label{font-size: 14px;}
</style>
<div class="formd">
	

<div class=" container">
<div class="formdr col-lg-12" >
	<form class="col-md-offset-3 col-lg-6 formdl" method="post" onsubmit="return false" id="sms-form">
 
   <div class="form-group">
    <label for="inputEmail3" class="col-sm-3 control-label text-center"><span style="color: #FF0000;">*</span> mobile phone number </label>
    <div class="col-sm-9">
      <input type="tel" name="phone" class="form-control" id="inputEmail3" placeholder="mobile phone number">
       <input type="hidden" th:value="${worksId}" name="worksId">
    </div>
   <div style="clear: both;"></div>
  </div>
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-3 control-label text-center"><span style="color: #FF0000;">*</span> SMS verification code</label>
    <div class="col-sm-6">
      <input type="text" name="smsCode" class="form-control" id="inputPassword3" placeholder="SMS verification code">
    </div>
     <div class="col-sm-3">
      <button type="button" class="btn btn-default" id="btnSendCode" onclick="sendSmsCode()" style="border-radius: 0; padding: 8px 30px;">get verification code</button>
    </div>
    <div style="clear: both;"></div>
  </div>
  <style type="text/css"> 
        .btnn{padding: 10px 80px; background: #00BFFF; border-radius: 2px; color: #fff; }
        .btnn1{padding: 8px 30px; background: #ccc; border-radius: 2px; color: #fff; }
</style>  
<div class="col-md-offset-3 col-lg-9">
	<button type="button" class="btn btnn" onclick="comfButtn()">determine</button>
	
</div>
  
</form>
<div style="clear: both;"></div>
</div>
</div>
</div>
<div style="clear: both;">
</div>
<!-- footer -->
	<div class="footer">
		<div class="agileinfo_footer_bottom1">
			<div class="container">
				<p class="col-lg-3" style="display: inline-block; letter-spacing:0px;line-height:34px;"><a th:href="@{~/company_en.html}">About Us</a>&nbsp; &nbsp;<a href="javascript:;">Legal Agreements</a></p>

				<p class="col-lg-9  text-right" style="display: inline-block;letter-spacing:0px;" > &copy;2017 Copyright by WE COPYRIGHT CHAIN FOUNDATION LTD. <img th:src="@{~/images/pic1.gif}"  style="margin-top:5px;"/></p>
				<div class="clearfix"> </div>
			</div>
		</div>
	</div>
		

<!-- //footer -->
<!-- JavaScripts -->
<script type="text/javascript" src="../static/js/jquery-2.1.4.min.js" th:src="@{~/js/jquery-2.1.4.min.js}"></script>
<script type="text/javascript" src="../static/js/sleekslider.js" th:src="@{~/js/sleekslider.js}"></script>
<script type="text/javascript" src="../static/js/app.js" th:src="@{~/js/app.js}"></script>
<script src="../static/js/bootstrap.js" th:src="@{~/js/bootstrap.js}"></script>
<script src="../static/js/layer/layer.js" th:src="@{/js/layer/layer.js}"></script>
<!-- //for bootstrap working -->
<script type="text/javascript">
//发送短信
var InterValObj; //timer变量，控制时间
var count = 60; //间隔函数，1秒执行
var curCount;//当前剩余秒数
function sendSmsCode(){
	var myreg = /^1[3|4|5|7|8][0-9]{9}$/;
	if(!myreg.test($("input[name='phone']").val())){
		layer.msg("手机号有误");
		return false;
	}
	$.ajax({
		url : "/user/sendSmsCode",
		type : "POST",
		data : {'phone':$("input[name='phone']").val()},
		cache : false,
		success : function(data) {
			var jsondata = JSON.parse(data); 
			layer.msg(jsondata.msg);
			if(jsondata.status=="0"){
				curCount = count;
				$("#btnSendCode").attr("disabled", "true");
				$("#btnSendCode").removeClass("btn-default").addClass("btnn1");
				$("#btnSendCode").html( + curCount + "秒再获取");
				InterValObj = setInterval(SetRemainTime, 1000); //启动计时器，1秒执行一次
			}
		},
		error : function() {
			layer.msg("服务器错误");
		}
	});
}
//timer处理函数
function SetRemainTime() {
	if (curCount == 0) {                
		clearInterval(InterValObj);//停止计时器
		$("#btnSendCode").removeAttr("disabled");//启用按钮
		$("#btnSendCode").removeClass("btnn1").addClass("btn-default");
		$("#btnSendCode").html("重新发送验证码");
	}
	else {
		curCount--;
		$("#btnSendCode").html( + curCount + "秒再获取");
	}
}
function comfButtn(){
	$.ajax({
		url : "/user/bindPhone",
		type : "POST",
		data : $('#sms-form').serialize(),
		cache : false,
		success : function(data) {
			var jsondata = JSON.parse(data); 
			if(jsondata.status=="0"){
				layer.msg(jsondata.msg);
				if(window.location.pathname.indexOf("bind")){
					window.location.href="/user/userInfo.html";
				}else{
					window.location.reload();
				} 
			}else{
				layer.msg(jsondata.msg);
			}
		},
		error : function() {
			layer.msg("服务器错误");
		}
	});
}
</script>
</body>
</html>